<!--master panel body-->
<section class="master-panel-body"
         ng-if="namespace.hasBranch
         && namespace.currentOperateBranch == 'master' ||
          !namespace.hasBranch">
    <!--main header-->
    <header class="panel-heading">
        <div class="row">
            <div class="col-md-6 header-namespace">
                <b class="namespace-name" ng-bind="namespace.viewName"
                   data-tooltip="tooltip" data-placement="bottom" title="{{namespace.comment}}"></b>
                <span class="label label-info no-radius namespace-label" ng-bind="namespace.format"></span>
                <span class="label label-warning no-radius namespace-label modify-tip"
                      ng-show="namespace.itemModifiedCnt > 0">
                    有修改
                    <span class="badge label badge-white namespace-label" ng-bind="namespace.itemModifiedCnt"></span>
                </span>
                <span class="label label-primary no-radius namespace-label"
                      ng-show="namespace.lockOwner">当前修改者:{{namespace.lockOwner}}</span>
            </div>

            <div class="col-md-6 text-right header-buttons">
                <button type="button" class="btn btn-success btn-sm"
                        data-tooltip="tooltip" data-placement="bottom" title="发布配置"
                        ng-show="(namespace.hasReleasePermission || namespace.hasModifyPermission)"
                        ng-disabled="namespace.isTextEditing"
                        ng-click="publish(namespace)">
                    <img src="img/release.png">
                    发布
                </button>
                <button type="button" class="btn btn-default btn-sm"
                        data-tooltip="tooltip" data-placement="bottom" title="回滚已发布配置"
                        ng-show="namespace.hasReleasePermission"
                        ng-click="rollback(namespace)">
                    <img src="img/rollback.png">
                    回滚
                </button>
                <a type="button" class="btn btn-default btn-sm"
                   data-tooltip="tooltip" data-placement="bottom" title="查看发布历史"
                   href="/config/history.html?#/appid={{appId}}&env={{env}}&clusterName={{cluster}}&namespaceName={{namespace.baseInfo.namespaceName}}">
                    <img src="img/release-history.png">
                    发布历史
                </a>
                <a type="button" class="btn btn-default btn-sm"
                   data-tooltip="tooltip" data-placement="bottom" title="配置修改、发布权限"
                   href="/namespace/role.html?#/appid={{appId}}&namespaceName={{namespace.baseInfo.namespaceName}}"
                   ng-show="hasAssignUserPermission">
                    <img src="img/assign.png">
                    授权
                </a>

                <a type="button" class="btn btn-default btn-sm"
                   data-tooltip="tooltip" data-placement="bottom" title="创建测试版本"
                   ng-show="!namespace.hasBranch && namespace.isPropertiesFormat && namespace.hasModifyPermission"
                   ng-click="preCreateBranch(namespace)">
                    <img src="img/test.png">
                    创建灰度
                </a>
                <a type="button" class="btn btn-default btn-sm J_tableview_btn"
                   data-tooltip="tooltip" data-placement="bottom" title="您没有任何配置权限,请申请"
                   ng-click="showNoModifyPermissionDialog()"
                   ng-show="!namespace.hasModifyPermission && !namespace.hasReleasePermission">
                    申请配置权限
                </a>
            </div>
        </div>
    </header>

    <!--second header-->
    <header class="panel-heading second-panel-heading">
        <div class="row">
            <div class="col-md-6 pull-left">
                <!--master branch nav tabs-->
                <ul class="nav nav-tabs">
                    <li role="presentation" ng-click="switchView(namespace, 'table')"
                        ng-show="namespace.isPropertiesFormat">
                        <a ng-class="{node_active:namespace.viewType == 'table'}">
                            <img src="img/table.png">
                            表格
                        </a>
                    </li>
                    <li role="presentation"
                        ng-click="switchView(namespace, 'text')">
                        <a ng-class="{node_active:namespace.viewType == 'text'}">
                            <img src="img/text.png">
                            文本
                        </a>
                    </li>
                    <li role="presentation" ng-click="switchView(namespace, 'history')">
                        <a ng-class="{node_active:namespace.viewType == 'history'}">
                            <img src="img/change.png">
                            更改历史
                        </a>
                    </li>
                    <li role="presentation" ng-click="switchView(namespace, 'instance')">
                        <a ng-class="{node_active:namespace.viewType == 'instance'}">
                            <img src="img/machine.png">
                            实例列表
                            <span class="badge badge-grey" ng-bind="namespace.instancesCount"></span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 text-right">
                <a class="clipboard"
                   data-clipboard-text="{{namespace.text}}"
                   data-tooltip="tooltip" data-placement="bottom" title="复制文本"
                   ng-show="!namespace.isTextEditing && namespace.viewType == 'text' && namespace.hasModifyPermission">
                    <img src="img/copy.png" class="ns_btn">
                </a>
                &nbsp;
                <a data-tooltip="tooltip" data-placement="bottom" title="取消修改"
                   ng-show="namespace.isTextEditing && namespace.viewType == 'text'"
                   ng-click="toggleTextEditStatus(namespace)">
                    <img src="img/cancel.png" class="ns_btn">
                </a>
                <a data-tooltip="tooltip" data-placement="bottom" title="修改配置"
                   ng-show="!namespace.isTextEditing && namespace.viewType == 'text' && namespace.hasModifyPermission"
                   ng-click="toggleTextEditStatus(namespace)">
                    <img src="img/edit.png" class="ns_btn">
                </a>

                &nbsp;
                <a data-tooltip="tooltip" data-placement="bottom" title="提交修改"
                   data-toggle="modal" data-target="#commitModal"
                   ng-show="namespace.isTextEditing && namespace.viewType == 'text'"
                   ng-click="modifyByText(namespace)">
                    <img src="img/submit.png" class="ns_btn">
                </a>

                <button type="button" class="btn btn-default btn-sm"
                        data-tooltip="tooltip" data-placement="bottom" title="按Key过滤配置"
                        ng-show="namespace.viewType == 'table' && namespace.currentOperateBranch == 'master'
                        && !namespace.isLinkedNamespace"
                        ng-click="toggleItemSearchInput(namespace)">
                    <span class="glyphicon glyphicon-filter"></span>
                    过滤配置
                </button>

                <button type="button" class="btn btn-default btn-sm J_tableview_btn"
                        data-tooltip="tooltip" data-placement="bottom" title="同步各环境间配置"
                        ng-click="goToSyncPage(namespace)"
                        ng-show="namespace.viewType == 'table' && namespace.currentOperateBranch == 'master'
                             && namespace.hasModifyPermission && namespace.isPropertiesFormat">
                    <img src="img/sync.png">
                    同步配置
                </button>

                <button type="button" class="btn btn-primary btn-sm"
                        ng-show="!namespace.isLinkedNamespace
                             && namespace.viewType == 'table'
                             && namespace.currentOperateBranch == 'master'
                             && namespace.hasModifyPermission"
                        ng-click="createItem(namespace)">
                    <img src="img/plus.png">
                    新增配置
                </button>
            </div>
        </div>
    </header>

    <section>
        <!--table view-->
        <div class="namespace-view-table" ng-show="namespace.viewType == 'table'">

            <div class="well well-sm no-radius text-center" ng-show="!namespace.isLinkedNamespace && !namespace.latestRelease">
                <span style="color: red"> Tips: 此namespace从来没有发布过，Apollo客户端将获取不到配置并记录404日志信息，请及时发布。</span>
            </div>
            <!--not link namespace-->
            <div ng-if="!namespace.isLinkedNamespace">
                <div class="col-md-8 col-lg-offset-2 search-input" ng-show="namespace.showSearchInput">
                    <input type="text" class="form-control" placeholder="输入key过滤"
                           ng-model="namespace.searchKey"
                           ng-change="searchItems(namespace)">
                </div>

                <table class="table table-bordered table-striped table-hover">
                    <thead>
                    <tr>
                        <th>发布状态</th>
                        <th class="hover" title="排序"
                            ng-click="col='item.key';desc=!desc;">
                            Key&nbsp;
                            <span class="glyphicon glyphicon-sort"></span>

                        </th>
                        <th>
                            Value
                        </th>
                        <th>
                            备注
                        </th>
                        <th class="hover" title="排序"
                            ng-click="col='item.dataChangeLastModifiedBy';desc=!desc;">
                            最后修改人
                            <span class="glyphicon glyphicon-sort"></span>

                        </th>
                        <th class="hover" title="排序"
                            ng-click="col='item.dataChangeLastModifiedTime';desc=!desc;">
                            最后修改时间
                            <span class="glyphicon glyphicon-sort"></span>
                        </th>

                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="config in namespace.viewItems |orderBy:col:desc"
                        ng-if="config.item.key">
                        <td width="8%" class="text-center">
                            <span class="label label-warning no-radius cursor-pointer" ng-if="config.isModified"
                                  data-tooltip="tooltip" data-placement="bottom" title="点击查看已发布的值"
                                  ng-click="showText(config.oldValue?config.oldValue:'新增的配置,无发布的值')">未发布</span>
                            <span class="label label-default-light no-radius"
                                  data-tooltip="tooltip" data-placement="bottom" title="已生效的配置"
                                  ng-if="!config.isModified">已发布</span>
                        </td>
                        <td width="15%" class="cursor-pointer" title="点击查看" ng-click="showText(config.item.key)">
                            <span ng-bind="config.item.key | limitTo: 250"></span>
                            <span ng-bind="config.item.key.length > 250 ? '...' :''"></span>
                            <span class="label label-default cursor-pointer" ng-if="config.hasBranchValue"
                                  data-tooltip="tooltip" data-placement="bottom" title="该配置有灰度配置,点击查看灰度的值"
                                  ng-click="namespace.currentOperateBranch=namespace.branchName;namespace.branch.viewType='table'">灰</span>
                            <span class="label label-success" ng-if="config.isModified && !config.oldValue"
                                  data-tooltip="tooltip" data-placement="bottom" title="新增的配置">新</span>
                            <span class="label label-info"
                                  ng-if="config.isModified && config.oldValue && !config.isDeleted"
                                  data-tooltip="tooltip" data-placement="bottom" title="修改的配置">改</span>
                            <span class="label label-danger" ng-if="config.isDeleted"
                                  data-tooltip="tooltip" data-placement="bottom" title="删除的配置">删</span>
                        </td>
                        <td width="30%" class="cursor-pointer" title="点击查看" ng-click="showText(config.item.value)">
                            <span ng-bind="config.item.value | limitTo: 250"></span>
                            <span ng-bind="config.item.value.length > 250 ? '...': ''"></span>
                        </td>
                        <td width="13%" title="{{config.item.comment}}">
                            <span ng-bind="config.item.comment | limitTo: 250"></span>
                            <span ng-bind="config.item.comment.length > 250 ?'...' : ''"></span>
                        </td>
                        <td width="10%" ng-bind="config.item.dataChangeLastModifiedBy">
                        </td>
                        <td width="16%"
                            ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
                        </td>

                        <td width="8%" class="text-center" ng-if="!config.isDeleted">
                            <img src="img/edit.png" data-tooltip="tooltip" data-placement="bottom" title="修改"
                                 ng-click="editItem(namespace, config.item)"
                                 ng-show="namespace.hasModifyPermission">
                            <img style="margin-left: 5px;" src="img/cancel.png"
                                 data-tooltip="tooltip" data-placement="bottom" title="删除"
                                 ng-click="preDeleteItem(namespace, config.item.id)"
                                 ng-show="namespace.hasModifyPermission">
                        </td>
                        <td width="6%" class="text-center" ng-if="config.isDeleted">
                        </td>

                    </tr>
                    </tbody>
                </table>
            </div>

            <!--link namespace-->
            <div class="panel panel-default" ng-if="namespace.isLinkedNamespace">
                <div class="panel-heading">
                    <div class="row">
                        <div class="padding-top-5 col-md-4">
                            覆盖的配置
                        </div>
                        <div class="col-md-2 col-lg-offset-6 text-right">
                            <input type="text" class="form-control" placeholder="filter by key ..."
                                   ng-class="{'search-onblur': namespace.searchStatus == 'OFF' || !namespace.searchStatus,
                                    'search-focus': namespace.searchStatus == 'ON'}"
                                   ng-model="namespace.searchKey"
                                   ng-change="searchItems(namespace)"
                                   ng-focus="namespace.searchStatus='ON'"
                                   ng-blur="namespace.searchStatus='OFF'">
                        </div>
                    </div>
                </div>

                <table class="table table-bordered table-striped table-hover"
                       ng-if="namespace.viewItems && namespace.viewItems.length">
                    <thead>
                    <tr>
                        <th>发布状态</th>
                        <th class="hover" title="排序"
                            ng-click="col='item.key';desc=!desc;">
                            Key&nbsp;
                            <span class="glyphicon glyphicon-sort"></span>

                        </th>
                        <th>
                            Value
                        </th>
                        <th>
                            备注
                        </th>
                        <th class="hover" title="排序"
                            ng-click="col='item.dataChangeLastModifiedBy';desc=!desc;">
                            最后修改人
                            <span class="glyphicon glyphicon-sort"></span>

                        </th>
                        <th class="hover" title="排序"
                            ng-click="col='item.dataChangeLastModifiedTime';desc=!desc;">
                            最后修改时间
                            <span class="glyphicon glyphicon-sort"></span>
                        </th>

                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="config in namespace.viewItems |orderBy:col:desc"
                        ng-if="config.item.key">
                        <td width="8%" class="text-center">
                            <span class="label label-warning no-radius cursor-pointer" ng-if="config.isModified"
                                  data-tooltip="tooltip" data-placement="bottom" title="点击查看已发布的值"
                                  ng-click="showText(config.oldValue?config.oldValue:'新增的配置,无发布的值')">未发布</span>
                            <span class="label label-default-light no-radius"
                                  data-tooltip="tooltip" data-placement="bottom" title="已生效的配置"
                                  ng-if="!config.isModified">已发布</span>
                        </td>
                        <td width="15%" class="cursor-pointer" title="点击查看" ng-click="showText(config.item.key)">
                            <span ng-bind="config.item.key | limitTo: 250"></span>
                            <span ng-bind="config.item.key.length > 250 ? '...' :''"></span>
                            <span class="label label-default cursor-pointer" ng-if="config.hasBranchValue"
                                  data-tooltip="tooltip" data-placement="bottom" title="该配置有灰度配置,点击查看灰度的值"
                                  ng-click="namespace.currentOperateBranch=namespace.branchName;namespace.branch.viewType='table'">灰</span>
                            <span class="label label-success" ng-if="config.isModified && !config.oldValue"
                                  data-tooltip="tooltip" data-placement="bottom" title="新增的配置">新</span>
                            <span class="label label-info"
                                  ng-if="config.isModified && config.oldValue && !config.isDeleted"
                                  data-tooltip="tooltip" data-placement="bottom" title="修改的配置">改</span>
                            <span class="label label-danger" ng-if="config.isDeleted"
                                  data-tooltip="tooltip" data-placement="bottom" title="删除的配置">删</span>
                        </td>
                        <td width="30%" class="cursor-pointer" title="点击查看" ng-click="showText(config.item.value)">
                            <span ng-bind="config.item.value | limitTo: 250"></span>
                            <span ng-bind="config.item.value.length > 250 ? '...': ''"></span>
                        </td>
                        <td width="13%" title="{{config.item.comment}}">
                            <span ng-bind="config.item.comment | limitTo: 250"></span>
                            <span ng-bind="config.item.comment.length > 250 ?'...' : ''"></span>
                        </td>
                        <td width="10%" ng-bind="config.item.dataChangeLastModifiedBy">
                        </td>
                        <td width="16%"
                            ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
                        </td>

                        <td width="8%" class="text-center" ng-if="!config.isDeleted">
                            <img src="img/edit.png" data-tooltip="tooltip" data-placement="bottom" title="修改"
                                 ng-click="editItem(namespace, config.item)"
                                 ng-show="namespace.hasModifyPermission">
                            <img style="margin-left: 5px;" src="img/cancel.png"
                                 data-tooltip="tooltip" data-placement="bottom" title="删除"
                                 ng-click="preDeleteItem(namespace, config.item.id)"
                                 ng-show="namespace.hasModifyPermission">
                        </td>
                        <td width="6%" class="text-center" ng-if="config.isDeleted">
                        </td>

                    </tr>
                    </tbody>
                </table>

                <div class="text-center no-config-panel"
                     ng-if="!namespace.viewItems || !namespace.viewItems.length">
                    <h5>无覆盖的配置</h5>
                </div>
            </div>

            <!--link namespace's public namespace-->
            <div ng-if="namespace.isLinkedNamespace">
                <div class="panel panel-default" ng-if="namespace.publicNamespace">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="padding-top-5 col-md-4">
                                公共的配置
                                <a href="/config.html?#/appid={{namespace.publicNamespace.baseInfo.appId}}" target="_blank">
                                    <small>
                                        (AppId:{{namespace.publicNamespace.baseInfo.appId}},
                                        Cluster:{{namespace.publicNamespace.baseInfo.clusterName}})
                                    </small>
                                </a>
                            </div>

                            <div class="col-md-4 text-center">
                                <div class="btn-group btn-group-sm" role="group"  ng-show="namespace.publicNamespace.isModified">
                                    <button type="button" class="btn btn-default"
                                            ng-class="{'active':namespace.publicNamespaceViewType == 'RELEASE'
                                        || !namespace.publicNamespaceViewType}"
                                            ng-click="namespace.publicNamespaceViewType = 'RELEASE'">
                                        已发布的配置
                                    </button>
                                    <button type="button" class="btn btn-default"
                                            ng-class="{'active':namespace.publicNamespaceViewType == 'NOT_RELEASE'}"
                                            ng-click="namespace.publicNamespaceViewType = 'NOT_RELEASE'">
                                        未发布的配置
                                    </button>
                                </div>
                            </div>

                            <div class="col-md-2 col-lg-offset-2 text-right">
                                <input type="text" class="form-control" placeholder="filter by key ..."
                                       ng-class="{'search-onblur': namespace.publicNamespace.searchStatus == 'OFF'
                                   || !namespace.publicNamespace.searchStatus,
                                    'search-focus': namespace.publicNamespace.searchStatus == 'ON'}"
                                       ng-model="namespace.publicNamespace.searchKey"
                                       ng-change="searchItems(namespace.publicNamespace)"
                                       ng-blur="namespace.publicNamespace.searchStatus='OFF'"
                                       ng-focus="namespace.publicNamespace.searchStatus='ON'"/>
                            </div>
                        </div>
                    </div>


                    <!--published items-->
                    <div ng-show="!namespace.publicNamespaceViewType || namespace.publicNamespaceViewType == 'RELEASE'">
                        <table class="table table-bordered table-striped table-hover"
                               ng-show="namespace.publicNamespace.hasPublishedItem">
                            <thead>
                            <tr>
                                <th class="hover" title="排序"
                                    ng-click="col='item.key';desc=!desc;">
                                    Key&nbsp;
                                    <span class="glyphicon glyphicon-sort"></span>

                                </th>
                                <th>
                                    Value
                                </th>
                                <th>
                                    备注
                                </th>
                                <th class="hover" title="排序"
                                    ng-click="col='item.dataChangeLastModifiedBy';desc=!desc;">
                                    最后修改人
                                    <span class="glyphicon glyphicon-sort"></span>

                                </th>
                                <th class="hover" title="排序"
                                    ng-click="col='item.dataChangeLastModifiedTime';desc=!desc;">
                                    最后修改时间
                                    <span class="glyphicon glyphicon-sort"></span>
                                </th>

                                <th>
                                    操作
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="config in namespace.publicNamespace.viewItems |orderBy:col:desc"
                                ng-if="config.item.key && !config.isModified && !config.isDeleted">
                                <td width="15%" class="cursor-pointer" title="点击查看" ng-click="showText(config.item.key)">
                                    <span ng-bind="config.item.key | limitTo: 250"></span>
                                    <span ng-bind="config.item.key.length > 250 ? '...' :''"></span>
                                </td>
                                <td width="35%" class="cursor-pointer" title="点击查看" ng-click="showText(config.item.value)">
                                    <span ng-bind="config.item.value | limitTo: 250"></span>
                                    <span ng-bind="config.item.value.length > 250 ? '...': ''"></span>
                                </td>
                                <td width="15%" title="{{config.item.comment}}">
                                    <span ng-bind="config.item.comment | limitTo: 250"></span>
                                    <span ng-bind="config.item.comment.length > 250 ?'...' : ''"></span>
                                </td>
                                <td width="10%" ng-bind="config.item.dataChangeLastModifiedBy">
                                </td>
                                <td width="15%"
                                    ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
                                </td>

                                <td width="10%" class="text-center" ng-if="!config.isDeleted">
                                    <img src="img/gray.png" data-tooltip="tooltip" data-placement="bottom" title="覆盖此配置"
                                         ng-click="editItem(namespace, config.item)"
                                         ng-show="namespace.hasModifyPermission && !config.covered">
                                </td>
                                <td width="6%" class="text-center" ng-if="config.isDeleted">
                                </td>

                            </tr>
                            </tbody>
                        </table>

                        <div class="text-center no-config-panel"
                             ng-if="namespace.publicNamespace.viewItems
                     && namespace.publicNamespace.viewItems.length
                     && !namespace.publicNamespace.hasPublishedItem">
                            <h5>无发布的配置</h5>
                        </div>
                    </div>

                    <!--not published items-->
                    <table class="table table-bordered table-striped table-hover"
                           ng-show="namespace.publicNamespaceViewType == 'NOT_RELEASE'">
                        <thead>
                        <tr>
                            <th class="hover" title="排序"
                                ng-click="col='item.key';desc=!desc;">
                                Key&nbsp;
                                <span class="glyphicon glyphicon-sort"></span>

                            </th>
                            <th>
                                已发布的值
                            </th>
                            <th>
                                未发布的值
                            </th>
                            <th>
                                备注
                            </th>
                            <th class="hover" title="排序"
                                ng-click="col='item.dataChangeLastModifiedTime';desc=!desc;">
                                最后修改时间
                                <span class="glyphicon glyphicon-sort"></span>
                            </th>

                            <th>
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="config in namespace.publicNamespace.viewItems |orderBy:col:desc"
                            ng-if="config.item.key && (config.isModified || config.isDeleted)">
                            <td width="20%" class="cursor-pointer" title="点击查看" ng-click="showText(config.item.key)">
                                <span ng-bind="config.item.key | limitTo: 250"></span>
                                <span ng-bind="config.item.key.length > 250 ? '...' :''"></span>
                            <span class="label label-success" ng-if="config.isModified && !config.oldValue"
                                  data-tooltip="tooltip" data-placement="bottom" title="新增的配置">新</span>
                            <span class="label label-info"
                                  ng-if="config.isModified && config.oldValue && !config.isDeleted"
                                  data-tooltip="tooltip" data-placement="bottom" title="修改的配置">改</span>
                            <span class="label label-danger" ng-if="config.isDeleted"
                                  data-tooltip="tooltip" data-placement="bottom" title="删除的配置">删</span>
                            </td>
                            <td width="25%" class="cursor-pointer" title="点击查看" ng-click="showText(config.oldValue)">
                                <span ng-bind="config.oldValue | limitTo: 250"></span>
                                <span ng-bind="config.oldValue.length > 250 ? '...': ''"></span>
                            </td>
                            <td width="25%" class="cursor-pointer" title="点击查看" ng-click="showText(config.item.value)">
                                <span ng-bind="config.item.value | limitTo: 250"></span>
                                <span ng-bind="config.item.value.length > 250 ? '...': ''"></span>
                            </td>
                            <td width="10%" title="{{config.item.comment}}">
                                <span ng-bind="config.item.comment | limitTo: 250"></span>
                                <span ng-bind="config.item.comment.length > 250 ?'...' : ''"></span>
                            </td>
                            <td width="15%"
                                ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
                            </td>

                            <td width="5%" class="text-center" ng-if="!config.isDeleted">
                                <img src="img/gray.png" data-tooltip="tooltip" data-placement="bottom" title="覆盖此配置"
                                     ng-click="editItem(namespace, config.item)"
                                     ng-show="namespace.hasModifyPermission && !config.covered">
                            </td>

                        </tr>
                        </tbody>
                    </table>
                    <div class="text-center no-config-panel"
                         ng-if="!namespace.publicNamespace.viewItems || !namespace.publicNamespace.viewItems.length">
                        <h5>无公共的配置</h5>
                    </div>
                </div>
                <div class="panel panel-default" ng-if="!namespace.publicNamespace">
                    <div class="panel-heading">
                        公共的配置
                    </div>
                    <div class="panel-body text-center">
                        当前公共namespace的所有者
                        <a href="/config.html?#/appid={{namespace.parentAppId}}" target="_blank">{{namespace.parentAppId}}</a>
                        没有关联此namespace,请联系{{namespace.parentAppId}}的所有者在{{namespace.parentAppId}}项目里关联此namespace
                    </div>
                </div>
            </div>

        </div>

        <!--text view-->
        <!--只读模式下的文本内容,不替换换行符-->
        <textarea class="form-control no-radius"
                  rows="{{namespace.itemCnt < 10 ? 10: namespace.itemCnt>20 ? 20:namespace.itemCnt}}"
                  ng-show="namespace.viewType == 'text' && !namespace.isTextEditing"
                  ng-disabled="!namespace.isTextEditing"
                  ng-bind="namespace.text">
            </textarea>
        <!--编辑状态下的文本内容,会过滤掉换行符-->
        <textarea class="form-control no-radius"
                  rows="{{namespace.itemCnt < 10 ? 10: namespace.itemCnt>20 ? 20:namespace.itemCnt}}"
                  ng-show="namespace.viewType == 'text' && namespace.isTextEditing"
                  ng-disabled="!namespace.isTextEditing" ng-model="namespace.editText">
            </textarea>
        <!--history view-->
        <div class="J_historyview history-view" ng-show="namespace.viewType == 'history'">
            <div class="media" ng-repeat="commits in namespace.commits">
                <div class="media-body">
                    <div class="row">
                        <div class="col-md-6"><h3 class="media-heading" ng-bind="commits.dataChangeCreatedBy"></h3>
                        </div>
                        <div class="col-md-6 text-right"><h5 class="media-heading"
                                                             ng-bind="commits.dataChangeCreatedTime  | date: 'yyyy-MM-dd HH:mm:ss'"></h5>
                        </div>
                    </div>


                    <!--properties format-->
                    <table class="table table-bordered table-striped text-center table-hover"
                           style="margin-top: 5px;"
                           ng-if="namespace.isPropertiesFormat">
                        <thead>
                        <tr>
                            <th>
                                Type
                            </th>
                            <th>
                                Key
                            </th>
                            <th>
                                Old Value
                            </th>
                            <th>
                                New Value
                            </th>
                            <th>
                                Comment
                            </th>
                        </tr>
                        </thead>
                        <tbody>

                        <!--兼容老数据,不显示item类型为空行和注释的item-->
                        <tr ng-repeat="item in commits.changeSets.createItems" ng-show="item.key">
                            <td width="2%">
                                新增
                            </td>
                            <td width="20%" title="{{item.key}}">

                                <span ng-bind="item.key | limitTo: 250"></span>
                                <span ng-bind="item.key.length > 250 ? '...' :''"></span>
                            </td>
                            <td width="30%">
                            </td>
                            <td width="30%" class="cursor-pointer" title="{{item.value}}"
                                ng-click="showText(item.value)">
                                <span ng-bind="item.value | limitTo: 250"></span>
                                <span ng-bind="item.value.length > 250 ? '...': ''"></span>
                            </td>
                            <td width="18%" title="{{item.comment}}">
                                <span ng-bind="item.comment | limitTo: 250"></span>
                                <span ng-bind="item.comment.length > 250 ?'...' : ''"></span>
                            </td>
                        </tr>
                        <tr ng-repeat="item in commits.changeSets.updateItems">
                            <td width="2%">
                                更新
                            </td>
                            <td width="20%" title="{{item.newItem.key}}">
                                <span ng-bind="item.newItem.key | limitTo: 250"></span>
                                <span ng-bind="item.newItem.key.length > 250 ? '...' :''"></span>
                            </td>
                            <td width="30%" class="cursor-pointer" title="{{item.oldItem.value}}"
                                ng-click="showText(item.oldItem.value)">
                                <span ng-bind="item.oldItem.value | limitTo: 250"></span>
                                <span ng-bind="item.oldItem.value.length > 250 ? '...': ''"></span>
                            </td>
                            <td width="30%" class="cursor-pointer" title="{{item.newItem.value}}"
                                ng-click="showText(item.newItem.value)">
                                <span ng-bind="item.newItem.value | limitTo: 250"></span>
                                <span ng-bind="item.newItem.value.length > 250 ? '...': ''"></span>
                            </td>
                            <td width="18%" title="{{item.newItem.comment}}">
                                <span ng-bind="item.newItem.comment | limitTo: 250"></span>
                                <span ng-bind="item.newItem.comment.length > 250 ?'...' : ''"></span>
                            </td>
                        </tr>
                        <tr ng-repeat="item in commits.changeSets.deleteItems"
                            ng-show="item.key || item.comment">
                            <td width="2%">
                                删除
                            </td>
                            <td width="20%" title="{{item.key}}">
                                <span ng-bind="item.key | limitTo: 250"></span>
                                <span ng-bind="item.key.length > 250 ? '...' :''"></span>
                            </td>
                            <td width="30%" title="{{item.value}}">
                                <span ng-bind="item.value | limitTo: 250"></span>
                                <span ng-bind="item.value.length > 250 ? '...': ''"></span>
                            </td>
                            <td width="30%">
                            </td>
                            <td width="18%" title="{{item.comment}}">
                                <span ng-bind="item.comment | limitTo: 250"></span>
                                <span ng-bind="item.comment.length > 250 ?'...' : ''"></span>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <!--not properties format-->
                    <div ng-if="!namespace.isPropertiesFormat">
                        <div ng-repeat="item in commits.changeSets.createItems">
                    <textarea class="form-control no-radius" rows="20"
                              ng-disabled="true" ng-bind="item.value">
                                </textarea>
                        </div>

                        <div ng-repeat="item in commits.changeSets.updateItems">
                    <textarea class="form-control no-radius" rows="20"
                              ng-disabled="true" ng-bind="item.newItem.value">
                                </textarea>
                        </div>
                    </div>


                </div>
                <hr>
            </div>
            <div class="text-center">
                <button type="button" class="btn btn-default" ng-show="!namespace.hasLoadAllCommit"
                        ng-click="loadCommitHistory(namespace)">加载更多
                    <span class="glyphicon glyphicon-menu-down"></span></button>
            </div>
        </div>
        <!--instance view-->
        <div class="panel panel-default instance-view" ng-show="namespace.viewType == 'instance'">
            <div class="panel-heading">
                <div class="row text-right" style="padding-right: 15px;">

                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-default"
                                ng-class="{'btn-primary':namespace.instanceViewType == 'latest_release'}"
                                ng-click="switchInstanceViewType(namespace, 'latest_release')"> 使用最新配置的实例
                            <span class="badge" ng-bind="namespace.latestReleaseInstances.total"></span>
                        </button>
                        <button type="button" class="btn btn-default"
                                ng-class="{'btn-primary':namespace.instanceViewType == 'not_latest_release'}"
                                ng-click="switchInstanceViewType(namespace, 'not_latest_release')">使用非最新配置的实例
                        <span class="badge"
                              ng-bind="namespace.instancesCount - namespace.latestReleaseInstances.total"></span>
                        </button>
                        <button type="button" class="btn btn-default"
                                ng-class="{'btn-primary':namespace.instanceViewType == 'all'}"
                                ng-click="switchInstanceViewType(namespace, 'all')">所有实例
                            <span class="badge" ng-bind="namespace.instancesCount"></span>
                        </button>
                    </div>
                    <button class="btn btn-default btn-sm"
                            data-tooltip="tooltip" data-placement="bottom" title="刷新列表"
                            ng-click="refreshInstancesInfo(namespace)">
                        <img src="../../img/refresh.png"/>
                    </button>
                </div>
            </div>

            <!--latest release instances-->
            <div class="panel-body" ng-show="namespace.instanceViewType == 'latest_release'">

                <div class="panel-default" ng-if="namespace.latestReleaseInstances.total > 0">
                    <div class="panel-heading">
                        <a target="_blank" data-tooltip="tooltip" data-placement="bottom" title="查看配置"
                           href="/config/history.html?#/appid={{appId}}&env={{env}}&clusterName={{cluster}}&namespaceName={{namespace.baseInfo.namespaceName}}&releaseId={{namespace.latestRelease.id}}">
                            {{namespace.latestRelease.name}}
                        </a>
                    </div>
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <td>App ID</td>
                            <td>Cluster Name</td>
                            <td>Data Center</td>
                            <td>IP</td>
                            <td>配置获取时间</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="instance in namespace.latestReleaseInstances.content">
                            <td width="20%" ng-bind="instance.appId"></td>
                            <td width="20%" ng-bind="instance.clusterName"></td>
                            <td width="20%" ng-bind="instance.dataCenter"></td>
                            <td width="20%" ng-bind="instance.ip"></td>
                            <td width="20%">{{instance.configs && instance.configs.length ?
                                (instance.configs[0].releaseDeliveryTime | date: 'yyyy-MM-dd HH:mm:ss') : ''}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="row text-center"
                         ng-show="namespace.latestReleaseInstances.content.length < namespace.latestReleaseInstances.total">
                        <button class="btn btn-default" ng-click="loadInstanceInfo(namespace)">加载更多</button>

                    </div>
                </div>

                <div class="text-center" ng-if="namespace.latestReleaseInstances.total == 0">
                    无实例信息
                </div>
            </div>

            <!--not latest release instances-->
            <div class="panel-body" ng-show="namespace.instanceViewType == 'not_latest_release'">
                <div class="panel-default"
                     ng-if="namespace.instancesCount - namespace.latestReleaseInstances.total > 0"
                     ng-repeat="release in namespace.notLatestReleases">
                    <div class="panel-heading">
                        <a target="_blank" data-tooltip="tooltip" data-placement="bottom" title="查看配置"
                           href="/config/history.html?#/appid={{appId}}&env={{env}}&clusterName={{cluster}}&namespaceName={{namespace.baseInfo.namespaceName}}&releaseId={{release.id}}">
                            {{release.name}}
                        </a>

                    </div>
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <td>App ID</td>
                            <td>Cluster Name</td>
                            <td>Data Center</td>
                            <td>IP</td>
                            <td>配置获取时间</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="instance in namespace.notLatestReleaseInstances[release.id]">
                            <td width="20%" ng-bind="instance.appId"></td>
                            <td width="20%" ng-bind="instance.clusterName"></td>
                            <td width="20%" ng-bind="instance.dataCenter"></td>
                            <td width="20%" ng-bind="instance.ip"></td>
                            <td width="20%">{{instance.configs && instance.configs.length ?
                                (instance.configs[0].releaseDeliveryTime | date: 'yyyy-MM-dd HH:mm:ss') : ''}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="text-center"
                     ng-if="namespace.instancesCount - namespace.latestReleaseInstances.total == 0">
                    无实例信息
                </div>
            </div>

            <!--all instances-->
            <div class="panel-body" ng-show="namespace.instanceViewType == 'all'">
                <div class="panel-default" ng-if="namespace.instancesCount > 0">
                    <table class="table table-bordered table-striped" ng-if="namespace.allInstances">
                        <thead>
                        <tr>
                            <td>App ID</td>
                            <td>Cluster Name</td>
                            <td>Data Center</td>
                            <td>IP</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="instance in namespace.allInstances">
                            <td width="25%" ng-bind="instance.appId"></td>
                            <td width="25%" ng-bind="instance.clusterName"></td>
                            <td width="25%" ng-bind="instance.dataCenter"></td>
                            <td width="25%" ng-bind="instance.ip"></td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="row text-center" ng-show="namespace.allInstances.length < namespace.instancesCount">
                        <button class="btn btn-default" ng-click="loadInstanceInfo(namespace)">加载更多</button>
                    </div>
                </div>
                <div class="text-center" ng-if="namespace.instancesCount == 0">
                    无实例信息
                </div>
            </div>
        </div>
    </section>
</section>
